<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item :replace="true" :to="{ path: '/mailingList' }">寄件列表</el-breadcrumb-item>
				<el-breadcrumb-item>寄件查看</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="consignedMail-body">
			<div >
				<el-form :model="mailFormData" ref="mailFormData" :rules="rules" :inline="true" label-width="100px"   size="small">
					<h4 style="margin: 10px 0">基本信息</h4>
					<el-form-item label="物流商" prop="logisticsId">
						<el-select placeholder="请选择物流商"  v-model="mailFormData.logisticsId"  size="small" style="width: 200px">
							<el-option
									v-for="item in logisticians"
									:key="item.id"
									:label="item.name"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="收件人国家" prop="receiptCountry">
						<el-select placeholder="请选择收件人国家" v-model="mailFormData.receiptCountry"  size="small" style="width: 200px">
							<el-option
									v-for="item in countryList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="包裹重量" prop="parcelWeight">
						<el-input  placeholder="请填写包裹重量" v-model="mailFormData.parcelWeight" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="外包装数量" prop="packagNum">
						<el-input  placeholder="请填写外包装数量" v-model="mailFormData.packagNum" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="平台交易号">
						<el-input  placeholder="请填写平台交易号" v-model="mailFormData.tradingNum" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="委托单号">
						<el-input  placeholder="请填写委托单号" v-model="mailFormData.entrustNum" style="width: 200px"></el-input>
					</el-form-item>
					<h4 style="margin: 10px 0">收件人信息</h4>
					<el-form-item label="收件人姓名" prop="receiptName">
						<el-input  placeholder="请填写收件人姓名" v-model="mailFormData.receiptName" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人州/省">
						<el-input  placeholder="请填写收件人州/省" v-model="mailFormData.receiptProvinces" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人电话" prop="receiptPhone">
						<el-input  placeholder="请填写收件人电话" v-model="mailFormData.receiptPhone" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人门牌号">
						<el-input  placeholder="请填写收件人门牌号" v-model="mailFormData.receiptHouseNum" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人城市" prop="receiptCity">
						<el-input  placeholder="请填写收件人城市" v-model="mailFormData.receiptCity" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人邮编">
						<el-input  placeholder="请填写收件人邮编" v-model="mailFormData.receiptCode" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人地址" prop="receiptAddress">
						<el-input  placeholder="请填写收件人地址" v-model="mailFormData.receiptAddress" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="收件人公司">
						<el-input  placeholder="请填写收件人公司" v-model="mailFormData.receiptCompany" style="width: 200px"></el-input>
					</el-form-item>
					<h4 style="margin: 10px 0">海关申报信息</h4>
					<el-form-item label="SKU">
						<el-input  placeholder="请填写" v-model="mailFormData.sku" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="申报英文名" prop="declareEnglishName">
						<el-input  placeholder="请填写" v-model="mailFormData.declareEnglishName" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="申报中文名">
						<el-input  placeholder="请填写" v-model="mailFormData.declareChinese" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="数量" prop="declareNum">
						<el-input  placeholder="请填写" v-model="mailFormData.declareNum" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="申报单价" prop="declarePrice">
						<el-input  placeholder="请填写" v-model="mailFormData.declarePrice" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="申报重量" prop="declareWeight">
						<el-input  placeholder="请填写" v-model="mailFormData.declareWeight" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="配货信息">
						<el-input  placeholder="请填写" v-model="mailFormData.distributionInfo" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="海关编码">
						<el-input  placeholder="请填写" v-model="mailFormData.customsCode" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="币种">
						<el-input  placeholder="请填写" v-model="mailFormData.currency" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="分类名称">
						<el-input  placeholder="请填写" v-model="mailFormData.classificationName" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="验证信息">
						<el-input  placeholder="请填写" v-model="mailFormData.validationInfo" style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item label="销售链接">
						<el-input  placeholder="请填写" v-model="mailFormData.salesLink" style="width: 200px"></el-input>
					</el-form-item>
				</el-form >
			</div>
			<div class="footer-btns">
				<el-button type="primary" icon="el-icon-edit-outline" size="small" @click="subEdit">编 辑 订 单</el-button>
				<el-button type="info" icon="el-icon-back" size="small" @click="$router.go(-1)">返 回</el-button>
			</div>
		</div>
	</div>
</template >

<script >
    import { logisticsAll } from "../api/logisticsModule";
    import {mailById, mailEdit} from "../api/orderModules";
    export default {
        name: "editMail",
        data(){
            return{
                logisticians:[],//物流商
                countryList:[
                    {
                        id:1,
                        name:'美国'
                    },
                    {
                        id:2,
                        name:'韩国'
                    },
                    {
                        id:3,
                        name:'日本'
                    },
                    {
                        id:4,
                        name:'新加坡'
                    },
                    {
                        id:5,
                        name:'澳大利亚'
                    },
                ],
                mailFormData:{},
                rules: {
                    parcelWeight:[
                        {required: true, message: '请填写包裹重量', trigger: 'blur'}
                    ],
                    packagNum:[
                        {required: true, message: '请填写外包装数量', trigger: 'blur'}
                    ],
                    declarePrice:[
                        {required: true, message: '请填写申报单价', trigger: 'blur'}
                    ],
                    receiptName:[
                        {required: true, message: '请填写收件人姓名', trigger: 'blur'}
                    ],
                    receiptPhone: [
                        {required: true, message: '请填写收件人电话', trigger: 'blur'}
                    ],
                    receiptCity: [
                        {required: true, message: '请填写收件人城市', trigger: 'blur'}
                    ],
                    receiptAddress: [
                        {required: true, message: '请填写收件人地址', trigger: 'blur'}
                    ],
                    declareEnglishName: [
                        {required: true, message: '请填写申报英文名', trigger: 'blur'}
                    ],
                    declareNum: [
                        {required: true, message: '请填写数量', trigger: 'blur'}
                    ],
                    declareWeight: [
                        {required: true, message: '请填写申报重量', trigger: 'blur'}
                    ],
                    logisticsId: [
                        { required: true, message: '请至少选择一种物流商', trigger: 'change' }
                    ],
                    receiptCountry: [
                        { required: true, message: '请至少选择一个国家', trigger: 'change' }
                    ],
                }
            }
        },
        created() {
            this.getLogisticians()
        },
        mounted() {
            this.getMail()
        },
        methods:{
            // 获取物流商
            getLogisticians () {
                logisticsAll().then(res => {
                    if (res.data.code === 200) {
                        this.logisticians = res.data.data
                    }
                })
            },
            // 获取信息
            async getMail () {
                const { data } = await mailById(this.$route.query.id)
                if (data.code === 200) {
                    this.mailFormData = data.data
                }
            },
			//	编辑
            subEdit(){
                console.log(this.mailFormData)
                let fieldsToValidate = [ 'logisticsId', 'receiptCountry','parcelWeight','packagNum','declarePrice','receiptName','receiptPhone','receiptCity','receiptAddress','declareEnglishName','declareNum','declareWeight'];
                // 将回调转换为Promise
                Promise.all(
                    fieldsToValidate.map((field) => {
                        return new Promise((resolve, reject) => {
                            this.$refs['mailFormData'].validateField(field, (errorMessage) => {
                                resolve(errorMessage);
                            });
                        });
                    })
                ).then((errorMessages) => {
                    console.info(errorMessages);
                    //  ['请输入姓名', '请输入年龄']

                    // errorMessages 里是各个字段的验证错误信息, 如果数组里全为空串则所有验证通过
                    // 判断errorMessages 里是否全是空串
                    let valid = errorMessages.every((errorMessage) => {
                        return errorMessage == '';
                    });

                    if (valid) {
                        mailEdit(this.mailFormData).then(res => {
                            console.log(res)
                            if (res.data.code === 200) {
                                this.$message.success(res.data.message)
                                this.$router.go(-1)
                            }
                        })
                    }
                })
			}
        }
    }
</script >

<style scoped lang="less">
	.consignedMail-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.footer-btns {
			width: 100%;
			margin-top: 50px;
			display: flex;
			justify-content: center;
		}
	}
</style >
